<template>
  <!-- 会员状态操作 -->
  <u-dialog :title="title" :show.sync="show" :auto-close="false" :footer="true" width="1080px" @cancel="cancel" @confirm="confirm">
    <el-form ref="dataForm" :rules="rules" :model="dataForm" label-width="120px">
      <el-tabs>

        <el-descriptions title="员工信息" :column="2" border>

          <el-descriptions-item label="姓名(必填)">
            <el-input v-model="dataForm.name" placeholder="请输入姓名" clearable show-word-limit maxlength="10" />
          </el-descriptions-item>

          <el-descriptions-item label="手机(必填)">
            <el-input v-model="dataForm.mobile" placeholder="请输入手机" show-word-limit maxlength="11" clearable />
          </el-descriptions-item>

          <el-descriptions-item label="生日">
            <el-input v-model="dataForm.birthday" placeholder="请输入生日" clearable />
          </el-descriptions-item>

          <el-descriptions-item label="性别">
            <!--            <el-input v-model="dataForm.sex" placeholder="请输入性别" clearable />-->
            <el-select v-model="dataForm.sex" placeholder="请选择性别" clearable>
              <el-option :value="'男'" label="男" />
              <el-option :value="'女'" label="女" />
            </el-select>
          </el-descriptions-item>

          <el-descriptions-item label="年龄">
            <el-input v-model="dataForm.age" placeholder="请输入年龄" clearable disabled />
          </el-descriptions-item>

          <el-descriptions v-if="dataForm.status === 2" title="离职信息" :column="2" border style="margin-top: 20px">
            <el-descriptions-item label="离职时间">
              {{ dataForm.endTime }}
            </el-descriptions-item>
            <el-descriptions-item label="离职事由">
              <el-input
                v-model="dataForm.endContent"
                type="text"
                placeholder="请输入离职事由"
                clearable
              />
            </el-descriptions-item>
          </el-descriptions>

        </el-descriptions>

        <el-descriptions title="当前状态" :column="2" border style="margin-top: 20px">
          <el-descriptions-item label="状态" :span="2">
            <el-radio-group v-model="dataForm.status">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="2">
                离职
                <el-tooltip class="item" effect="dark" content="离职后,不可使用企微" placement="top">
                  <i class="el-icon-question" />
                </el-tooltip>
              </el-radio>
              <el-radio :label="3">
                锁定
                <el-tooltip class="item" effect="dark" content="确认导购不用该账号！锁定不可使用部分企微功能" placement="top">
                  <i class="el-icon-question" />
                </el-tooltip>
              </el-radio>
              <el-radio :label="4">拒绝</el-radio>
            </el-radio-group>
          </el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">
            <el-input
              v-model="dataForm.note"
              type="textarea"
              :rows="3"
              placeholder="请输入备注"
            />
          <!--            {{ dataForm.note }}-->
          </el-descriptions-item>
        </el-descriptions>
      </el-tabs>

    </el-form>
  </u-dialog>

</template>

<script>
/**
 * 业务组件 - 会员状态操作
 */
import region from '@/design/data/region.json'
export default {
  name: 'Edit',
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    /** 选中的数据 */
    data: {
      type: Object,
      default: data => {
        return ({
          card_id: '',
          name: ''
        })
      }
    }
  },
  data() {
    return {
      api: this.$u.api.PluginsGuideTemporary,
      options: region,
      title: '编辑导购',
      dataForm: {},
      rules: {
        remark: [
          { required: true, message: '请输入备注以方便追溯历史原因', trigger: ['blur'] }
        ],
        mobile: [
          {
            validator: this.validateMobile,
            message: '请输入正确的手机号格式',
            trigger: 'blur'
          }
        ],
        emergencyMobile: [
          {
            validator: this.validateMobile,
            message: '请输入正确的手机号格式',
            trigger: 'blur'
          }
        ]
      },
      selectOptions: [{
        value: '亲属',
        label: '亲属'
      },
      {
        value: '朋友',
        label: '朋友'
      },
      {
        value: '同事',
        label: '同事'
      },
      {
        value: '其他',
        label: '其他'
      }]
    }
  },
  watch: {
    show(newVal, oldVal) {
      // 监听是否弹框,决定是否初始化数据
      // console.log(newVal + '---------------' + oldVal)
      if (newVal) {
        this.dataForm = this.$u.deepClone(this.data)
        // console.log(this.dataForm)
        const { name } = this.dataForm
        this.title = '导购编辑:查询【' + name + '】'
        this.dataForm.region = [this.dataForm.province, this.dataForm.city, this.dataForm.area]
        const self = this
        self.$nextTick(() => {
          self.$refs['dataForm'].clearValidate()
        })
        // this.$nextTick(() => {
        //   if (this.$refs.dataForm) {
        //     this.$refs.dataForm.clearValidate()
        //   }
        // })
      }
    }
  },
  methods: {
    // 邮箱格式验证
    validateEmail(email) {
      // 正则表达式用于验证邮箱格式
      const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/
      if (email && !emailRegex.test(email)) {
        return false
      }
      return true
    },
    // 手机格式验证
    validateMobile(value) {
      const mobileRegex = /^1[3456789]\d{9}$/ // 手机号正则表达式
      if (value && !mobileRegex.test(value)) {
        return false
      } else {
        return true
      }
    },
    handleChange(e) {
      this.dataForm.province = e[0]
      this.dataForm.city = e[1]
      this.dataForm.area = e[2]
    },
    // 确认
    confirm() {
      // 验证必填
      if (this.dataForm.name === '' || this.dataForm.mobile === '') {
        this.$message.error('姓名及手机号不能为空')
        return
      }
      // 验证手机格式
      if ((!this.validateMobile(this.dataForm.mobile)) || (!this.validateMobile(this.dataForm.emergencyMobile))) {
        this.$message.error('手机号码格式错误')
        return
      }
      // 验证邮箱格式
      if (!this.validateEmail(this.dataForm.email)) {
        this.$message.error('邮箱格式错误')
        return
      }
      const self = this
      self.$confirm('此操作将更改 【' + self.dataForm.name + '】 的导购内容，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 效验数据格式
        self.$refs['dataForm'].validate((valid) => {
          if (valid) {
            console.log('成功')
            // 提交更新数据
            self.api.update(self.dataForm).then(() => {
              // 通知信息
              self.$u.msg('更改成功')
              // 双向绑定数据
              self.$emit('changeShow', false)
              // 更新成功后传递
              self.$emit('change')
            })
          }
        })
      }).catch(() => {
      })

      self.$emit('confirm')
    },
    // 关闭或者取消
    cancel() {
      this.$emit('changeShow', false)
      this.$emit('cancel')
    }
  }
}
</script>
